<template>
	<div class="contentBox ffffff paddinglr radius" style="width: 23%;">
		<div class="flexbetween paddingtb" v-for="(item,index) in tabList" :key="index" @click="changeRouter(item)">
			<div class="flexleft pointer">
				<img class="imgBox margin_right1" :src="item.url" mode="">
				<div :class="item.is_checked?'nameBox text_h color_theme':'nameBox text_h color_three'">
					{{item.name}}
				</div>
			</div>
			<div class="right_icon"></div>
		</div>
		<!-- 联系客服弹窗 -->
		<el-dialog title="" :visible.sync="dialogVisible" width="25%" center top="15vh" :show-close="false" :before-close="handleClose">
			<img class="kefuImg margin_top1" src="../../../static/image/mine/kefu.png" alt="">
			<div class="flexcenter">
				<div class="codeImg">
					<img :src="kefuInfo.admin_wx_image" alt="">
				</div>
			</div>
			<div class="textcenter text_h color_nine margin_top1">微信客服：{{kefuInfo.admin_wx}}</div>
			<div class="textcenter text_h color_nine margin_top1">电话客服：{{kefuInfo.admin_tel}}</div>
		</el-dialog>
	</div>
</template>

<script>
	import {systeminit} from "@/API/system"
	export default {
		data() {
			return {
				dialogVisible: false,
				tabList: [{
					name: "个人信息",
					url: require("../../../static/image/mine/tab1.png"),
					path: "/mine/mineMessage",
					is_checked: false,
				}, {
					name: "学习订单",
					url: require("../../../static/image/mine/tab2.png"),
					path: "/mine/studyOrder",
					is_checked: false,
				}, {
					name: "学习考试卡",
					url: require("../../../static/image/mine/tab3.png"),
					path: "/mine/studyExamCard",
					is_checked: false,
				}, {
					name: "学习记录",
					url: require("../../../static/image/mine/tab4.png"),
					path: "/mine/studyRecord",
					is_checked: false,
				}, {
					name: "我的考试",
					url: require("../../../static/image/mine/tab5.png"),
					path: "/mine/mineExamination",
					is_checked: false,
				}, {
					name: "我的错题",
					url: require("../../../static/image/mine/tab6.png"),
					path: "/mine/mineWrongQuestion",
					is_checked: false,
				}, {
					name: "商城订单",
					url: require("../../../static/image/mine/tab7.png"),
					path: "/mine/shoppingOrder",
					is_checked: false,
				}, {
					name: "我的提问",
					url: require("../../../static/image/mine/tab8.png"),
					path: "/mine/mineQuestion",
					is_checked: false,
				}, {
					name: "我的发布",
					url: require("../../../static/image/mine/tab9.png"),
					path: "/forum/mineRelease",
					is_checked: false,
				}, {
					name: "我的老师",
					url: require("../../../static/image/mine/tab10.png"),
					path: "/mine/mineTeacher",
					is_checked: false,
				}, {
					name: "我的余额",
					url: require("../../../static/image/mine/tab11.png"),
					path: "/mine/mineBalance",
					is_checked: false,
				}, {
					name: "联系客服",
					url: require("../../../static/image/mine/tab12.png"),
					path: 1,
					is_checked: false,
				}, {
					name: "我的收藏",
					url: require("../../../static/image/mine/tab13.png"),
					path: "/mine/mineCollect",
					is_checked: false,
				}, {
					name: "设置",
					url: require("../../../static/image/mine/tab14.png"),
					path: "/setUp/agreement/1",
					is_checked: false,
				}, ],
				kefuInfo:{},//客服信息
			}
		},
		created() {
			this.changeSelect()
			this.getInfo()
		},
		methods:{
			changeSelect(){
				this.tabList.forEach(item=>{
					item.is_checked=false
				})
				let index = this.tabList.findIndex(item => {
					return item.path == this.$route.path
				})
				// console.log(this.$route,"$route");
				// console.log(index,"index");
				if(index!=-1){
					this.tabList[index].is_checked = true
				}
			},
			changeRouter(item){
				if(item.is_checked){
					return false
				}
				if(!item.path){
					return false
				}
				if(item.path==1){
					this.dialogVisible=true
					return false
				}
				this.$router.push({
					path:item.path
				})
				this.$router.afterEach((to,from)=>{
					this.changeSelect()
				})
			},
			handleClose(done) {
				done();
			},
			async getInfo(){
				let res=await systeminit()
				this.kefuInfo=res.data.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		width: 346px;
	}

	.imgBox {
		width: 22px;
		min-width: 22px;
		height: 22px;
	}
	.nameBox{
		white-space: nowrap;
	}
	.nameBox:hover {
		color: #3478F5;
	}
	.kefuImg{
		width: 100%;
		display: block;
	}
	.codeImg {
		width: 295px;
		height: 295px;
	
		img {
			width: 100%;
			height: 100%;
		}
	}
	::v-deep .el-dialog {
		border-radius: 16px;
	}
	::v-deep .el-dialog__body{
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	::v-deep .el-dialog__header{
		display: none;
	}
</style>